<template>
    <div class="appinfo-container">
        <div class="appinfo-title">修改密码</div>
        <el-form :model="p"appinfo-s="formRules" label-width="80px" class="appinfo-form" label-position="right">
            <el-form-item label="账号" prop="phone">
                {{ phone }}
            </el-form-item>
            <el-form-item label="原密码" prop="old">
                <el-input type="password" v-model="pws.old" placeholder="请输入" style="width:250px"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new">
                <el-input type="password" v-model="pws.password" placeholder="请输入" style="width:250px"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm_new">
                <el-input type="password" v-model="pws.confirm_new" placeholder="请输入" style="width:250px"></el-input>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" @click="onSubmit" class="submit-button">保存</el-button>
            <el-button type="primary" @click="returnApp" class="submit-button">返回应用</el-button>
        </div>
    </div>
</template>

<script>
    import {merchantInfo, updatePW} from '@/api/info'

    export default {
        data() {
            return {
                phone: '',
                pws: {
                    old: '',
                    password: '',
                    confirm_new: '',
                },
                formRules: {
                    old: [{required: true, message: '请输入原密码', trigger: 'blur'}],
                    password: [{required: true, message: '请输入新密码', trigger: 'blur'}],
                    confirm_new: [{required: true, message: '请输入确认密码', trigger: 'blur'}],
                }
            }
        },
        mounted() {
            this.merchantInfo()
        },
        methods: {
            onSubmit() {
                if (this.pws.old === '' || this.pws.password === '' || this.pws.confirm_new === ''){
                    this.$message.warning('请出入密码');
                    return;
                }
                if (this.pws.password !== this.pws.confirm_new){
                    this.$message.warning('两次新密码输入不一致');
                    return;
                }
                updatePW(this.pws).then(response => {
                    if (response.status === 200) {
                        this.$message.success(response.message);
                        this.$store.dispatch('user/logout');
                    } else {
                        this.$message.error(response.message);
                    }
                })
            },
            returnApp() {
                this.$router.push({ path: '/' })
            },
            merchantInfo() {
                const params = {
                    key: this.$store.state.app.activeApp.saa_key,
                };
                merchantInfo(params).then(res => {
                    if (res.status === 200) {
                        this.phone = res.data.phone;
                    } else if (res.status === 204) {
                        this.phone = '';
                    } else {
                        this.$message.error(res.message);
                    }
                })
            }
        }
    }
</script>

<style lang="css" scoped>
    .appinfo-container {
        height: 570px;
        width: 460px;
        padding: 35px 60px;
        box-sizing: border-box;
        border-radius: 5px;
        margin: 100px auto;
        text-align: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    .appinfo-title {
        font-size: 20px;
        /* font-family: 'Hiragino Sans GB'; */
        font-weight: 600;
        letter-spacing: 2px;
        color: #536DFF;
    }

    .appinfo-form {
        padding: 30px 0 0 0;
        width: 100%;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;

        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 6px;
    }

    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .submit-button {
        padding: 10px 50px;
        font-size: 15px;
    }
</style>